<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/bg_logon.css">
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background-image: none;
        }

        #upupoo_bottomLayer,
        #upupoo_imageLayer,
        #upupoo_exhibitionLayer,
        #upupoo_exhibitionLayer_two {
            width: 100%;
            height: 100%;
        }

        body form {
            height: 430px;
            background-color: rgba(133, 131, 131,0);
            color: black;
        }

        #upupoo_bottomLayer {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            
        }

        #upupoo_imageLayer {
            position: absolute;
            z-index: 10;
        }

        #upupoo_imageLayer>#upupoo_imageLayerImg {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            z-index: 11;
        }

        #upupoo_exhibitionLayer {
            position: absolute;
            z-index: 100;
        }

        #upupoo_exhibitionLayer_two {
            position: absolute;
            z-index: 101;
        }

        form {
            position: absolute;
            z-index: 11;
        }
    </style>

</head>

<body onselectstart="return false">
    <div id="upupoo_bottomLayer">
        <form action="#">
            <h2>感谢注册</h2>
            <div class="username">
                <label for="username">用户名：</label>
                <input type="text" id="username">
            </div>
            <div class="nick">
                <label for="nick">昵&nbsp;&nbsp;&nbsp;称：</label>
                <input type="text" id="nick">
            </div>
            <div class="password">
                <label for="password">密&nbsp;&nbsp;&nbsp;码：</label>
                <input type="password" id="password">
            </div>
            <div class="submit">
                <button>注&nbsp;册</button>
            </div>
        </form>
        <div id="upupoo_imageLayer">
            <img src="#" id="upupoo_imageLayerImg" alt="" />
            <div id="upupoo_exhibitionLayer">

            </div>
            <div id="upupoo_exhibitionLayer_two">
                <div class="lhy_bgcontainer"></div>
            </div>
        </div>
    </div>
    <script src="./upupooConfig.json" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/snow.js"></script>
    <script src="../../js/bg_register.js"></script>
    <script type="text/javascript">
        var upupoo_imageLayerImg = document.getElementById('upupoo_imageLayerImg');
        upupoo_imageLayerImg.src = upupooConfig.bgImg;
        //配置
        (function () {
            var container = document.querySelector(".lhy_bgcontainer");
            if (/MSIE 6|MSIE 7|MSIE 8/.test(navigator.userAgent)) {
                return;
            } else {
                if (/MSIE 9|MSIE 10/.test(navigator.userAgent)) {
                    $(container).css("height", $(window).height()).bind("click", function () {
                        $(this).remove()
                    })
                }
            }
            var containerWidth = $(container).width();
            var containerHeight = $(container).height();
            var particle;
            var camera;
            var scene;
            var renderer;
            var mouseX = 0;
            var mouseY = 0;
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
            var particles = [];
            var particleImage = new Image();
            particleImage.src = "../../static/img/white_snow.png";
            var snowNum = 30 * upupooConfig.density.value + 10;
            //													
            function init() {
                camera = new THREE.PerspectiveCamera(upupooConfig.size.value * 1 + 20, containerWidth /
                    containerHeight, 1, 10000);
                camera.position.z = 1000;
                scene = new THREE.Scene();
                scene.add(camera);
                renderer = new THREE.CanvasRenderer();
                renderer.setSize(containerWidth, containerHeight);
                var material = new THREE.ParticleBasicMaterial({
                    map: new THREE.Texture(particleImage)
                });
                for (var i = 0; i < snowNum; i++) {
                    particle = new Particle3D(material);
                    particle.position.x = Math.random() * 2000 - 1000;
                    particle.position.y = Math.random() * 2000 - 1000;
                    particle.position.z = Math.random() * 2000 - 1000;
                    particle.scale.x = particle.scale.y = 1;
                    scene.add(particle);
                    particles.push(particle)
                }
                container.appendChild(renderer.domElement);
                document.addEventListener("mousemove", onDocumentMouseMove, false);
                setInterval(loop, 33 - upupooConfig.speed.value * 0.33 + 1)
            }

            function onDocumentMouseMove(event) {
                mouseX = event.clientX - windowHalfX;
                mouseY = event.clientY - windowHalfY
            }

            function onDocumentTouchStart(event) {
                if (event.touches.length == 1) {
                    event.preventDefault();
                    mouseX = event.touches[0].pageX - windowHalfX;
                    mouseY = event.touches[0].pageY - windowHalfY
                }
            }

            function onDocumentTouchMove(event) {
                if (event.touches.length == 1) {
                    event.preventDefault();
                    mouseX = event.touches[0].pageX - windowHalfX;
                    mouseY = event.touches[0].pageY - windowHalfY
                }
            }

            function loop() {
                for (var i = 0; i < particles.length; i++) {
                    var particle = particles[i];
                    particle.updatePhysics();
                    with(particle.position) {
                        if (y < -1000) {
                            y += 2000
                        }
                        if (x > 1000) {
                            x -= 2000
                        } else {
                            if (x < -1000) {
                                x += 2000
                            }
                        }
                        if (z > 1000) {
                            z -= 2000
                        } else {
                            if (z < -1000) {
                                z += 2000
                            }
                        }
                    }
                }
                camera.position.x += (mouseX - camera.position.x) * 0.005;
                camera.position.y += (-mouseY - camera.position.y) * 0.005;
                camera.lookAt(scene.position);
                renderer.render(scene, camera)
            }
            init()
        }())
        $("button").trigger("click")
    </script>
</body>

</html>